<template>
    <basic-container>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-setting"></i> 部门区域管理</el-breadcrumb-item>
                <el-breadcrumb-item><i class="el-icon-date"></i> 详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <avue-detail ref="form" v-model="form" :option="option">
            <template
                    slot="areaSnsForm"
                    slot-scope="scope">
<!--                <div style="display: inline-block">-->
                    <el-tree
                            ref="areaTree"
                            v-model="areaSnList"
                            :data="areaTreeData"
                            :props="areaProps"
                            :default-checked-keys="areaSnList"
                            :default-expanded-keys="areaSnList"
                            :check-strictly="false"
                            node-key="areaSn"
                            highlight-current
                            show-checkbox
                            placeholder="请选择区域"/>
<!--                </div>-->
            </template>
        </avue-detail>
    </basic-container>
</template>

<script>
    import {fetchDeptArea, editDeptArea} from '@/api/crm/dept_area';
    import {formOption} from '@/const/crud/crm/form_option/dept_area';
    import {areaTree} from '@/api/crm/area';

    export default {
        data() {
            return {
                form: {},
                role: [],
                areaSnList: [],
                option: formOption,
                areaTreeData: [],
                areaProps: {
                    label: 'areaName',
                    value: 'areaSn'
                }
            }
        },
        computed: {},
        mounted() {

        },
        created() {
            let deptId = JSON.parse(this.$route.query.res).deptId;
            fetchDeptArea(deptId).then(response => {
                this.form = response.data.data;
                this.areaSnList = this.form.areaSnList;
                this.fetchAreaTree();
            })
        },
        methods: {
            fetchAreaTree() {
                areaTree().then(response => {
                    this.areaTreeData = response.data.data;
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .crumbs {
        margin: 20px 10px;
    }
</style>


